<template>
    <div>
        <Counter caption="First" :initValue="first" @onUpdate="onFirstUpdate" />
        <Counter caption="Second" :initValue="second"  @onUpdate="onSecondUpdate"/>
        <Counter caption="Third" :initValue="third"  @onUpdate="onThirdUpdate"/>
        <span>总数：{{first+second+third}}</span>
    </div>
</template>
<script>
import Counter from "./Counter.vue";
export default {
  data() {
    return { first: 0, second: 10, third: 20 };
  },
  components: { Counter },
  methods: {
    onFirstUpdate(count) {
      this.onUpdate("first", count);
    },
    onSecondUpdate(count) {
      this.onUpdate("second", count);
    },
    onThirdUpdate(count) {
      this.onUpdate("third", count);
    },
    onUpdate(keyName, count) {
      window.console.log("%o, %o", keyName, count);
      this[keyName] = count;
    }
  }
};
</script>

